<template>
  <div class="manual-wrapper">
    <div class="banner"></div>
    <div class="topic">
      学员你好，恭喜你选择钱多多商学院，这是你做的最正确的人生决策之一，从此你将开启你的财务自由之路！在这里你会学到最有效的理财技能，你会结识志同道合的朋友，形成自己的财务自由圈子，你的人生将会因此变得更加美好！
    </div>
    <div class="subject">钱多多简介</div>
    <div class="content">
      钱多多是一所纯粹的理财技能提升商学院，不卖保
      险、不卖理财产品。钱多多也是为数不多的敢为学员
      学习效果真正负责的商学院，钱多多承诺:学员获得
      毕业证<strong>2</strong>日内认为价值低于价格即可全额退费。
      <strong>学理财，上钱多多</strong>。
    </div>
    <section>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多使命</div>
        </div>
        <div class="content">
          <div>让1亿人财商及格，让财务自由不再难</div>
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多愿景</div>
        </div>
        <div class="content">
          <div>1）成为伟大的百年商学院</div>
          <div>2）成为全球最好的财务自由实现平台</div>
          <div>3）让钱多多的奋斗者实现财务自由</div>
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多的核心价值观</div>
        </div>
        <div class="content">
          <div>以学员为中心一一提升学员，成就学员</div>
          <div>实韦求是一一唯真唯实，不唯己不唯上</div>
          <div>博爱一一爱熟悉的人，爱陌生的人</div>
          <div>诚信一一真诚正直，信守承诺</div>
          <div>团结一切，达成目标</div>
          <div>专业尽责，精益求精</div>
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多的的育人理念</div>
        </div>
        <div class="content">
          <div>志于道：树立崇高的理想</div>
          <div>据于德：培养高尚的品德</div>
          <div>精于技：精通有效的财技</div>
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多的教学理念</div>
        </div>
        <div class="content">
          <div>系统化：让学习更有效果</div>
          <div>简单化：让学习变的容易</div>
          <div>实战化：让知识变成技能</div>
          <div>小组化：让学习更有氛围</div>
          <div>线上化：让学习成本更低</div>
          <div>游戏化：让学习充满乐趣</div>
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多的的课程设置</div>
        </div>
        <div class="content">
          理财系统课分为【财务自由方法论课】和【财务自由实践课】。财务自由方法论课包括:《财务自由工具操作技能》、《财务自由财报分析技、《财务自由企业分析技能》三部分。实践课每周1次，全套总计24次，与方法论课相配套。通过方法论加实践，让学员快速掌握实现财务自由的技能。
        </div>
      </div>
      <div class="paragraph">
        <div class="subject">
          <div>钱多多的的教学模式</div>
        </div>
        <div class="content">
          <div class="lesson-wrapper">
            <div>线上视频课</div>
            <div>线上测试</div>
            <div>实战操作</div>
            <div>案例分析</div>
            <div>小组讨论</div>
            <div>毕业后持续指导</div>
          </div>
          <div class="desc">
            <img :src="'./static/images/graph.png'" />
            <div>
              美国国家训练实验室研究成果显示，不同学习方式产生的学习效果迥异，主动学习的方式更有助于掌握学习内容，达到事半功倍的效果，其中转教别人（90％）、实作演练（70％）组讨论（50％）这三种学习方式的效果最好，如上图金字塔所示。
            </div>
            <div class="lesson-intro">
              <div>我们的课程基于以上理论，包含了以下内容：</div>
              <div>①线上视频课（知识留存率25％）</div>
              <div>
                全套课程约350个视频，每个在5分钟左右，方便同学们利用碎片化时间学习。
              </div>
              <div>②线上考试（知识留存率70％）</div>
              <div>
                每小节短视频后有1道测试题;每个章节后，有10道测试题;每周实践课当天也有考试，不同形式的測试可以帮助学员吸收掌握课程精
              </div>
              <div>③案例分析作业（知识留存率70％）</div>
              <div>作业，同学们通过完成作业，可以加深理解，提高分析能力</div>
              <div>④实战操作（知识留存率70％）</div>
              <div>
                操作课中涉及的相关知识，通过实战操作把知识转化为技能。每个学员都可以在小组内通过相互交流讨论的方式，发现问题解决问题，从而提高学习效率
              </div>
              <div>⑤毕业后持续指导（留存率90％）</div>
              <div>
                学完全套课程的学员，在后期投资过程中，遇到问题可以继续寻求老师的指导和帮助
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="subject">关于学习成长的正确认知</div>
    <div class="content dashed">
      <div>
        人与人之间最大的不同，就是思维的不同。心理学发现，人的成长受两种思维模式的影响，一种是固定型思维，另一种是成长型思维。
      </div>
      <div>
        有些人能够获得成功并不是因为他们的能力和天赋，而是他们在追求目标的过程中展现出来的思维模式。
      </div>
      <div>
        固定型思维的人如果犯错了，会主动给自己贴上标签，认为自己不行，他们非常注重结果，习惯性地以结果来否定自己。
      </div>
      <div>
        而成长型思维的人，是以成长的角度来看待每件事，追求的是从每件事中收获成长的快乐和意义，虽然他们也注重结果，但是他们更愿意用持续成长的角度来继续精进自己。
      </div>
      <div>
        希望钱多多的每位学员都能够拥有成长型思维，挖掘自己的全部潜能，从而让自己的入生充满更多的可能性！
      </div>
    </div>
    <div class="subject">学习模式</div>
    <div class="content dashed">
      <div>
        <div class="subtitle">学习模式：视频课+实践课+案例分析作业+考试</div>
        <div>
          <strong>①视频课：</strong
          >线上视频课由学员自己掌握学习进度即不能慢于实践的进度也不大幅快于实践课的进度，建议与实践课保持同步（参考下页实践课安排）。为了达到好的学习效果，每周的教学视频至少要看3-5遍。
        </div>
        <div>
          <strong>②实践课：</strong>每周1次实践课，具体时间每个斑级开班时确定
        </div>
        <div>
          <strong>③案例分析作业：</strong
          >实践课后，老师发放作业，同学完成后统一<span class="blue"
            >提交给组长</span
          >，组长汇总后，提交给老师，<span class="blue"
            >作业提交给老师的截止日期为：实践课前一天晚22点。</span
          >
        </div>
        <div class="job-method">
          <div>同学们可直接在发放的Word文档中编写;</div>
          <div>也可以在纸上手写答案，拍照发给组长;</div>
          <div>也可以使用手机在线文档：金山（WPS）文档、腾讯文档等;</div>
        </div>
        <div>
          每周作业都有<span class="blue">作业解析和视频讲解</span
          >，这是完成作的重要参考资料
        </div>
        <div>
          <strong>④考试：</strong
          >每周实践课当天开通考试，考试截止日期:实践课当天24:00，每周考试有12道单选，8道多选，20分钟内完成
        </div>
        <div>
          <div><strong>视频课/考试地点：</strong>公众号"钱多多实践训练营"</div>
          <div>
            <img class="example" :src="'./static/images/example.png'" />
          </div>
        </div>
      </div>
    </div>
    <div class="lesson-content-wrapper" v-for="(lesson, i) of lessons" :key="i">
      <div>
        <div class="tb-title">{{ lesson.title }}</div>
        <div class="tb-header">
          <div v-for="(col, i) of lesson.cols" :key="i">{{ col }}</div>
        </div>
        <div class="tb-body">
          <div class="tb-tr" v-for="week of lesson.weeks" :key="week.index">
            <div>第{{ week.index }}周</div>
            <div>
              <div v-for="(item, j) of week.lessons" :key="j">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="subject">分班分组</div>
    <div class="content dashed">
      <div class="compact">
        1.
        1个班1个微信群，每班100人左右，分班分组会参考个人中心【我的名片】中的信息，请认真填写，班级实行小组制，每组至少一名组长。
      </div>
      <div class="compact">
        2.
        每组组长通过竞选并由指导老师指定产生。竞选以文字或语音形式进行，文字字数不超过
        300 字，语音不超过 2 分钟。
      </div>
      <div class="compact">3. 指导老师随机分配组员，每组不超过 20 名。</div>
      <div class="compact">
        4. 分好组后，由组长和组员共同决定组名，每位学员需要修改群名片，<strong
          class="blue"
          >格式为：X 组+真实姓名，以免被误踢！</strong
        >
      </div>
      <div class="compact"><strong>5. 组长的责任</strong></div>
      <div class="compact"><strong>责任①：</strong> 组织本组学员学习讨论；</div>
      <div class="compact">
        <strong>责任②：</strong>认真完成每周作业和考试，为组员树立榜样;
      </div>
      <div class="compact">
        <strong>责任③：</strong>督促组员完成作业和考试，并统计每周完成情况。
      </div>
      <div class="compact"><strong class="blue">6. 竞选组长的收获</strong></div>
      <div class="compact">
        <strong>收获①：</strong
        >组长会更有决心和动力把财务自由课程掌握好，从而终生受益。
      </div>
      <div class="compact">
        <strong>收获②：</strong
        >组长是火车头，带领大家前进，老师将重点关注组长的学习情况。
      </div>
      <div class="compact">
        <strong>收获③:</strong
        ><strong class="blue"
          >优秀组长毕业后可优先获得钱多多商学院的全职机会，提升工资收入。</strong
        >
      </div>
      <div class="compact">
        <strong>收获④：</strong
        >可以锻炼沟通能力、管理能力、组织能力，从而得到自我的提升。
      </div>
      <div class="compact">
        <strong>收获⑤：</strong
        >能在小组和班级内打造个人影响力，交到更多志同道合的朋友，拓展自己的人脉圈。
      </div>
    </div>
    <div class="subject">班规</div>
    <div class="content dashed">
      <div class="compact">
        1. 本班（群）以学习为主，不讨论与课程无关的话题，鼓励提出课程相关问题。
      </div>
      <div class="compact">
        2. 爱护群环境，不推荐股票或理财产品、不发广告、链接、鸡汤和刷屏等。
      </div>
      <div class="compact">
        3.
        学员不得在班级里争吵，一经发现，老师会第一时间制止，制止无效的，会被暂时移出班群。
      </div>
      <div class="compact">4. 不讨论政治；不评论国家领导人。可讨论政策。</div>
      <div class="compact">5. 不说脏话；不进行人身攻击。可对观点进行辩论。</div>
      <div class="compact">
        6. 不旷课、不迟到、不早退。有重大事情提前一天向指导老师请假。
      </div>
      <div class="compact">
        7. 不拖欠案例分析作业，作业必须在实践课前一天完成并提交。
      </div>
      <div class="compact">
        8. 考试不作弊，实践课当天开始考试，当天必须完成。
      </div>
      <div class="compact">
        9. 实行签到打卡制度，学员要在开课前 5 分钟进行签到。
      </div>
      <div class="compact sub-content">
        <div class="compact"><strong>违规处罚：</strong></div>
        <div class="compact text-indent">① 违反 1 次，口头警告；</div>
        <div class="compact text-indent">
          ② 违反 2 次，班群里发红包 200 元；
        </div>
        <div class="compact text-indent">
          ③ 违反 3 次，班群里发红包 500 元；
        </div>
        <div class="compact text-indent">④ 违反 4 次，开除出班群。</div>
      </div>
    </div>
    <div class="subject">毕业证书</div>
    <div class="content dashed">
      <div>
        全套财务自由系统课程，总计 100 分。得分≥80 分，可获得毕业证书。得分不足
        80 分不能获得毕业证书。毕业证书可以在学习账号的个人中心上查询。
      </div>
      <div class="compact"><strong>毕业分数计算规则：</strong></div>
      <div class="compact">
        <img class="example" src="../assets/images/performance.png" />
      </div>
      <div>
        <strong>① 毕业证书：</strong>希望每位同学都能在 24
        周的学习中掌握财务自由的核心技能，坚持学习，不忘初心，顺利毕业！
      </div>
      <div class="sub-content">
        <img class="example" src="../assets/images/cert01.png" />
      </div>
      <div class="compact">
        <strong>② 智士学位：</strong
        >获得毕业证的学员在非工资收入大于1000元/月时，可获得智士学位。
        <strong class="blue"
          >获得智士学位的学员有机会被聘任为钱多多商学院的指导老师。</strong
        >
      </div>
      <div class="sub-content">
        <img class="example" src="../assets/images/cert02.png" />
      </div>
      <div class="compact">
        <strong>③ 贤士学位：</strong
        >获得智士学位的学员在为国家、社会、商学院做出了重大贡献时，可以获得钱多多商学院颁发的贤士学位。
      </div>
      <div class="sub-content">
        <img class="example" src="../assets/images/cert03.png" />
      </div>
    </div>
    <div class="subject">注意事项</div>
    <div class="content dashed">
      <div>
        1.
        学习中遇到问题，可先在小组群里讨论，组长组织大家一起交流，解决不了的再请教指导老师。
      </div>
      <div>
        2. 学员发生重疾、重大意外事故的，可以办理休学，个人分数暂不统计。
      </div>
      <div>
        3.
        <strong class="blue"
          >每位同学只有一次拿毕业证的机会，中途休学、重修拿不到毕业证，请勿随意休学或重修。</strong
        >
      </div>
      <div>4. 为了自己和其他学员的学习环境请务必遵守班规，否则会被处罚。</div>
      <div>
        5.
        学员不得倒卖或者在网络平台传播视频、讲义等课程内容，一经发现，将注销学习账号且移出班群，并移交公安机关处理。
      </div>
    </div>
    <div class="subject">寄语</div>
    <div class="content">
      <strong
        >恭喜同学们即将开启近半年的财务自由学习之旅，愿钱多多的每一位同学能够把握今天，超越过去，把“乐学善思”记在心中，努力探索，做最好的自己，从今天开始！</strong
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lessons: [{
        title: '《财务自由工具操作技能》实践课安排',
        cols: ['时间', '实践课相关课程内容'],
        weeks: [
          {index: 1, lessons: ['《财务自由纲领》（1-13）', '《太极图中的财务自由智慧》（1-4）']},
          {index: 2, lessons: ['《实现财务自由的关键词汇》（1-9）', '《必定实现财务自由的十大步骤》1-10）']},
          {index: 3, lessons: ['《财务自由指数基金投资方法》（1-16）']},
          {index: 4, lessons: ['《财务自由A股投资方法》（1-15）', '《財务自由港股投资方法》（1-7）']},
          {index: 5, lessons: ['《財务自由美股投资方法》（15）']},
          {index: 6, lessons: ['《财务自由RETs投资方法》（1-16）']},
          {index: 7, lessons: ['《財务自由房地产投资方法》（1-14）']},
          {index: 8, lessons: ['《財务自由现金管理方法》（1-10）']},
          {index: 9, lessons: ['《财务自由家庭保障体系构建方法》（1-13）']},
          {index: 10, lessons: ['《通过财务报表读懂家庭》（1-6）', '《通过财务报表读懂人生》（1-10）', '《财务自由家庭资产配置方法》（1-7）', '《财务自由实现计划》（1）']}
        ]
      }, {
        title: '《财务自由财报分析技能》实践课安排',
        cols: ['时间', '实践课相关课程内容'],
        weeks: [
          {index: 11, lessons: ['《财务报表阅读简介》（1-3）', '《读懂资产负债表》（1-8）']},
          {index: 12, lessons: ['《读懂资产负债表》（9-18）']},
          {index: 13, lessons: ['《读懂资产负债表》（19-28）']},
          {index: 14, lessons: ['《读懂资产负债表》（29-37）']},
          {index: 15, lessons: ['《读懂资产负债表》（38-46）']},
          {index: 16, lessons: ['《读懂资产负债表》（47-51）']},
          {index: 17, lessons: ['《读懂利润表》（1-14）']},
          {index: 18, lessons: ['《读懂现金流量表》（19）']},
          {index: 19, lessons: ['《通过财报读懂企业的23个步骤》（1-11）']},
          {index: 20, lessons: ['《关键财务指标》（1-2）', '《读懂财报其他重要内容》（1-6）', '《通过财务报表读懂美股企业》（1-5）']}
        ]
      }, {
        title: '《财务自由企业分析技能》实践课安排',
        cols: ['时间', '实践课相关课程内容'],
        weeks: [
          {index: 21, lessons: ['《强大企业模型》（1-8）', '《强大企业模型之领导者》（1-11）']},
          {index: 22, lessons: ['《强大企业模型之企业文化》（1-10）', '《强大企业模型之治理结构》（1-9）']},
          {index: 23, lessons: ['《强大企业模型之商业模式》（1-9）', '《强大企业模型之团队》（1-7）', '《强大企业模型之沟通》（1-9）']},
          {index: 24, lessons: ['《企业模型之现金流》（1-14）', '《企业模型之系统》（1-4）', '《企业模型之法规》（1-12）']}
        ]
      }]
    };
  }
};
</script>

<style lang="less" scoped>
.manual-wrapper {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 100px;
  > .banner {
    width: 750px;
    height: 479px;
    background: url(../assets/images/banner.png) no-repeat 0 0;
    background-size: contain;
    z-index: 1;
  }
  > .topic {
    position: relative;
    width: 700px;
    height: 260px;
    padding: 30px;
    line-height: 1.7;
    margin: -130px auto 0 auto;
    z-index: 2;
    font-size: 28px;
    border-radius: 16px;
    box-sizing: border-box;
    background: #fff;
    font-weight: 500;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    &:after {
      content: "";
      position: absolute;
      height: 50px;
      width: 50px;
      background: url(../assets/images/tail.png) no-repeat 0 0;
      background-size: contain;
      right: 10px;
      bottom: 4px;
    }
  }
  > .subject {
    width: 689px;
    height: 80px;
    line-height: 80px;
    background: url(../assets/images/subject-bg.png) no-repeat 0 0;
    background-size: contain;
    margin: 60px auto 40px auto;
    font-size: 32px;
    text-indent: 1.5em;
    font-weight: 700;
    // color: #081845;
    color: #5e8acc;
  }
  > .content {
    padding: 0 60px;
    font-size: 28px;
    line-height: 1.7;
    > :not(.compact, :last-child) {
      margin-bottom: 50px;
    }
    .compact {
      margin-bottom: 20px;
    }
    &.dashed {
      > :last-child {
        padding-bottom: 50px;
        border-bottom: 1px dashed #ccc;
      }
    }
    > div {
      &.sub-content {
        padding: 0 46px;
      }
      img.example {
        width: 100%;
      }
      > div {
        line-height: 1.7;
        &:not(.compact, :last-child) {
          margin-bottom: 60px;
        }
        &.subtitle {
          font-weight: 600;
          padding: 10px 0 0;
        }
        span.blue {
          color: #2257e0;
          font-weight: 600;
        }
        img.example {
          width: 100%;
          margin: 40px 0;
        }
        &.job-method {
          background: #fffef5;
          > div {
            padding-left: 80px;
            line-height: 1.5;
            font-size: 24px;
            &:not(:last-child) {
              margin-bottom: 20px;
            }
            &:nth-child(1) {
              background: url(../assets/images/word.png) no-repeat left 20px
                center;
              background-size: 40px 40px;
            }
            &:nth-child(2) {
              background: url(../assets/images/photo.png) no-repeat left 20px
                center;
              background-size: 40px 40px;
            }
            &:nth-child(3) {
              background: url(../assets/images/wps.png) no-repeat left 20px
                center;
              background-size: 40px 40px;
            }
          }
        }
        &.text-indent {
          text-indent: 1em;
        }
      }
      strong.blue {
        color: #1d53df;
      }
    }
  }
  > .lesson-content-wrapper {
    padding: 0 40px;
    font-size: 28px;
    line-height: 1.7;
    > div {
      border-bottom: 1px dotted #ccc;
      padding: 80px 0;
      > .tb-title {
        height: 110px;
        line-height: 110px;
        text-align: center;
        font-size: 32px;
        background: #fff;
      }
      .tb-header {
        display: flex;
        position: relative;
        height: 88px;
        > div {
          background: #edf2ff;
          text-align: center;
          font-size: 30px;
          font-weight: 500;
          padding: 10px;
          box-sizing: border-box;
          &:first-child {
            width: 120px;
            line-height: 88px;
          }
          &:last-child {
            flex: 1;
            line-height: 88px;
          }
        }
        &:after {
          content: "";
          height: 100%;
          border-right: 4px solid #fff;
          position: absolute;
          left: 120px;
          top: 0;
        }
      }
      .tb-body {
        .tb-tr {
          display: flex;
          position: relative;
          align-items: center;
          min-height: 88px;
          background: #fff;
          font-size: 26px;
          box-sizing: border-box;
          &:nth-child(2n + 1) {
            background: #f2f7f6;
          }
          &:nth-child(2n) > {
            background: #fdfaf9;
          }
          &:after {
            content: "";
            height: 100%;
            border-right: 4px solid #fff;
            position: absolute;
            left: 120px;
            top: 0;
          }
          > div {
            padding: 10px;
            box-sizing: border-box;
            &:first-child {
              width: 120px;
              text-align: center;
            }
            &:last-child {
              flex: 1;
              line-height: 2;
            }
          }
        }
      }
    }
  }
  .paragraph {
    padding: 0 60px;
    font-size: 28px;
    .subject {
      display: flex;
      align-items: center;
      margin-top: 80px;
      height: 100px;
      line-height: 100px;
      > div {
        position: relative;
        height: 48px;
        line-height: 48px;
        font-size: 30px;
        border-radius: 24px;
        padding: 0 40px 0 20px;
        background: #2563ff;
        color: #fff;
        &::after {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border: 12px solid;
          border-color: #fff transparent transparent;
          top: 20px;
          right: 12px;
        }
      }
    }
    .content {
      padding: 18px 18px 50px 18px;
      line-height: 1.7;
      border-bottom: 1px dashed #ccc;
      > div {
        line-height: 1.8;
        &.lesson-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          > div {
            width: 328px;
            height: 56px;
            position: relative;
            line-height: 56px;
            border: 1px dotted #bec8e4;
            background: #f8faff;
            border-radius: 28px;
            font-weight: 600;
            text-indent: 80px;
            &:not(:first-child) {
              margin-top: 50px;
            }
            &:not(:last-child) {
              &::after {
                position: absolute;
                content: "";
                width: 28px;
                height: 28px;
                background: url(../assets/images/plus.png) no-repeat center
                  center;
                background-size: contain;
                left: 164px;
                margin-left: -14px;
                top: 64px;
              }
            }
            @modeList: vedio, testing, operation, cases, discuss, direct;
            .bgIcon(@n, @i:1) when (@i <= @n) {
              &:nth-child(@{i}) {
                @word: extract(@modeList, @i);
                background-image: url("../assets/images/@{word}.png");
                background-repeat: no-repeat;
                background-position: left 20px center;
                background-size: 30px 30px;
              }
              .bgIcon(@n, (@i + 1));
            }
            .bgIcon(length(@modeList));
          }
        }
        &.desc {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 70px;
          > img {
            width: 500px;
            margin-bottom: 30px;
          }
          > div {
            font-size: 28px;
            padding: 68px 16px 16px;
            font-weight: 520;
            &.lesson-intro {
              > div {
                &:nth-child(2n + 1):not(:first-child, :last-child) {
                  margin-bottom: 70px;
                }
                &:nth-child(2n):not(:first-child) {
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
    @wordList: BUSINESS, VIGION, OORE_VALU, EDUCATION, TEACHING, CURRICULU,
      LEARRNIN;
    .bgNumber(@n, @i:1) when (@i <= @n) {
      &:nth-child(@{i}) {
        @word: extract(@wordList, @i);
        .subject {
          background: url("../assets/images/@{word}.png") no-repeat 0 0;
          background-size: contain;
        }
        .content {
          background: url("../assets/images/0@{i}.png") no-repeat;
          background-position: right 10px bottom 26px;
          background-size: 60px 64px;
        }
      }
      .bgNumber(@n, (@i + 1));
    }
    .bgNumber(length(@wordList));
  }
}
</style>
